<template>
	<el-card class="form-container">
		<el-form :model="dataForm" ref="dataForm" label-width="90px">
			<el-form-item label="用户编号" prop="userCode">
				<el-input v-model="dataForm.userCode" readonly></el-input>
			</el-form-item>
			<el-form-item label="用户名" prop="userName">
				<el-input v-model="dataForm.userName"  readonly></el-input>
			</el-form-item>
			<el-form-item label="角色列表" prop="onlineStatus">
				<el-checkbox-group v-model="dataForm.roleCode">
					<el-checkbox v-for="role in roleList" 
						:key="role.id"
						:label="role.roleName"
						:value="role.roleCode"
					></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item>
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary"  @click="submit('dataForm')">确定</el-button>
			</el-form-item>
		</el-form>
		
	</el-card>
	
</template>

<script>
	import { findUserRole ,bindRole} from '@/api/admin/systemUser'
	import { findRoleList } from '@/api/admin/systemRole'
	export default{
		data(){
			return{
				roleList:[],
				dataForm:{
					userCode:'',
					userName:'',
					roleCode:[]
				}
			}
		},
		created() {
			this.initRoleList()
			this.view(this.$route.query.id)
		},
		methods:{
			initRoleList(){
				findRoleList().then(res =>{
					if(res.data.responseCode == 200){
						res.data.responseData.forEach(item =>{
							let role = {
								id:item.id,
								roleName:item.roleName,
								roleCode:item.roleCode,
							}
							this.roleList.push(role)
						})
						
						
					}
				})
			},
			view(val){
				findUserRole(val).then(res =>{
					if(res.data.responseCode == 200){
						console.log(res)
						this.dataForm = res.data.responseData
					}
				})
			},
			cancel(){
				this.$router.go(-1)
			},
			submit(){
				let checkRoleCodeList = []
				for(let i = 0;i < this.roleList.length;i++){
					console.log(this.dataForm.roleCode)
					console.log(this.dataForm.roleCode.indexOf(this.roleList[i].roleName) != -1)
					if(this.dataForm.roleCode.indexOf(this.roleList[i].roleName) != -1){
						checkRoleCodeList.push(this.roleList[i].roleCode)
					}
				}
				this.dataForm.roleCode = checkRoleCodeList
				bindRole(this.dataForm).then(() => {
					this.$notify({
						title: '绑定成功',
						message: '绑定角色成功',
						type: 'success',
						duration: 2000,
						onClose: this.$router.go(-1)
					})
				}).catch(err =>{
					this.$message.error(err.data.responseMessage)
				})
			}
		}
	}
</script>

<style>
</style>
